<script setup lang="ts">
import useBiliStore from "@/store/modules/useBiliStore";
import $api from "@/api";

const biliStore = useBiliStore();
const emit = defineEmits<{
  (e: "update:show", val: boolean): void;
}>();
function onModalEnter() {}
function onModalLeave() {}
function startAuthApp() {
  if (!biliStore.code) return window.$message.error("身份码必填");
  $api.bili.startBiliApp().then(data => {
    window.$message.success("成功开启");
    emit("update:show", false);
    $api.bili.heartBiliApp();
  });
}
function getBiliCode() {
  window.electronAPI.openExternal("https://play-live.bilibili.com/");
}
</script>

<template>
  <n-modal
    preset="card"
    class="w-100 min-w-100"
    title=""
    :on-after-enter="onModalEnter"
    :on-after-leave="onModalLeave"
    @update:show="$emit('update:show', $event)"
  >
    <template #header>
      <div class="text-center text-lg text-pink-400">认证身份后可开启玩法</div>
    </template>
    <div class="flex-sc flex-col px-4">
      <n-input-group class="flex-cc">
        <n-button secondary>身份码</n-button>
        <n-input
          v-model:value="biliStore.code"
          clearable
          placeholder="请输入身份码"
        />
      </n-input-group>
      <div class="flex-bc w-full text-xs mt-2">
        <div class="text-gray-400">在获取推流地址出可获取身份码</div>
        <div class="text-pink-400 cursor-pointer" @click="getBiliCode">
          去获取
        </div>
      </div>
      <div
        class="mt-10 flex-cc w-25 h-10 rounded-md bg-pink-400 cursor-pointer"
        @click="startAuthApp"
      >
        <span class="text-sm text-white">开启玩法</span>
      </div>
    </div>
  </n-modal>
</template>

<style scoped lang="scss"></style>
